<template>
    <div class="content-box">
        <e-heading>{{this.$route.path.includes('publish') ? '发布公告' : '编辑公告'}}</e-heading>
        <el-form ref="form" v-bind="getFormProps()" label-width="80px" class="form-body">
            <el-form-item label="是否置顶"
              prop="top"
              :rules="[
                {required: true, message: '请选择是否置顶显示'}
              ]">
              <el-radio-group v-model="form.top">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="标题"
              prop="title"
              :rules="[
                {required: true, whitespace: true, message: '请输入公告标题'},
                { min: 4, max: 30, message: '请输入4-30个字符的公告标题'}
              ]">
              <el-input class="normal-input" v-model.trim="form.title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="内容编辑"
              prop="contentTxt"
              :rules="[
                { required: true, whitespace: true, min: 8, max: 5000, message: '请输入8-5000个字符的公告内容'},
                Object.assign({trigger: 'blur'}, validator.rule.checkTrim, {message: '请输入8-5000个字符的公告内容'})            
              ]">
                <e-editor v-model="form.content" :text.sync="form.contentTxt"/>
            </el-form-item>
            <div class="button-box">
              <el-button type="primary" native-type="submit" :loading="loading">{{this.$route.path.includes('publish')?'发布':'保存编辑'}}</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import EEditor from '@e-ui/Editor'
  import validator from 'utils/validator'
  import {form} from 'utils/mixins'
  import api from 'api/race'
  export default {
    mixins: [form],
    components: {
      EEditor
    },
    computed: {
      ...mapGetters({
        race_edit_match_notice: 'race_edit_match_notice' // 获取赛事公共的内容进行编辑
      })
    },
    data () {
      return {
        validator,
        loading: false,
        form: {
          top: 1, // 置顶
          title: '', // 标题
          content: '', // 内容
          contentTxt: ''
        }
      }
    },
    mounted () {
      this.handleNoticeData()
      window.scrollTop = document.scrollTop = document.documentElement.scrollTop = document.body.scrollTop = 0
    },
    watch: {
      race_edit_match_notice (value) {
        if (value) {
          this.form.top = value.top
          this.form.title = value.title
          this.form.content = value.content
          let node = document.createElement('div')
          node.innerHTML = value.content
          this.form.contentTxt = node.innerText
        }
      }
    },
    methods: {
      handleNoticeData () {
        if (this.$route.fullPath.includes('edit')) {
          this.$store.dispatch('race_edit_match_notice', {matchInfoId: this.$route.params.id})
        }
      },
      submit () {
        let data = Object.assign({matchId: this.$route.query.matchId}, this.form)
        delete data.contentTxt
        if (this.$route.path.includes('publish')) {
          api.addMatchNotice(data, {context: this, successMsg: '发布成功'}).then(res => {
            history.back()
          })
        } else {
          data.id = this.$route.params.id
          api.editMatchNotice(data, {context: this, successMsg: '修改成功'}).then(res => {
            history.back()
          })
        }
      }
    },
    destroyed () {
      this.$store.commit('RACE_EDIT_MATCH_NOTICE', {
        content: '',
        title: '',
        top: 1
      })
    }
  }
</script>

<style scoped>

.normal-input {
  width: 500px;
}

.el-radio-group .el-radio {
  min-width: 10px
}
</style>
